<template>
  <d2-container>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="role"
        label="用户类型"
        width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.role === 0">个人</el-tag>
          <el-tag v-if="scope.row.role === 1">企业</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="loginId"
        label="账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="avatar"
        label="头像"
        width="180">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column
        prop="sex"
        label="性别"
        width="180">
        <template slot-scope="scope">
          <span>{{scope.row.sex === 1 ? "男" : "女"}}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="idNumber"
        label="身份证号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="emergencyContactName"
        label="紧急联系人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="emergencyContactPhone"
        label="紧急联系人电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="unitName"
        label="单位/学校名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="enabled"
        label="状态"
        width="180">
        <template slot-scope="scope">
          <el-switch
            @change="()=>handleChangeSwitch(scope.row._id,scope.row.enabled)"
            v-model="scope.row.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        width="210"
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-row >
            <el-popconfirm
              @confirm="()=>handleSetStatus(scope.row._id)"
              title="是否注销此用户？"
            >
              <el-button type="danger" round size="small" slot="reference">注销用户</el-button>
            </el-popconfirm>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageInfo="pageInfo" :total="total" :handleCurrentChange="handleCurrentChange"
                :handleSizeChange="handleSizeChange"/>
  </d2-container>
</template>

<script>
import api from '@/api'
import Pagination from "@/components/Pagination/index.vue";
export default {
  components: {Pagination},
  comments: {
    Pagination
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageInfo: {
        pageSize: 10,
        current: 1
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const {pageSize,current,rows,count} = await api.SYS_GET_USER(this.pageInfo);
      this.tableData = rows;
      this.pageInfo = {
        pageSize,
        current
      }
      this.total = count
    },
    // 处理用户状态
    async handleChangeSwitch(id,enabled){
        await api.SYS_SET_USER_INFO(id, {enabled:enabled})
      this.$message.success("设置用户状态成功")

    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.current = val
      this.fetchData()
    },
    async handleSetStatus(id, status) {
     // 注销用户操作
      const resp = await api.SYS_DEL_USER(id)
      await this.fetchData()
    }

  }
}
</script>
